import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./List.module.css";
import { Getg } from "../request/api";
import { Pagination } from 'antd';
export default function List() {
    let [seaCate, setSeacate] = useState("")
    let [brand, setBrand] = useState("")
    let [area, setArea] = useState("")
    let [tem, setTem] = useState("")
    let [sorts, setSorts] = useState("")
    let [list, setList] = useState([])
    let [itemindex, setItemindex] = useState(0)
    let [page, setPage] = useState(1)
    let [pageSize, setPageSize] = useState(3)
    let [total, setTotal] = useState(0)
    let [isup, setIsup] = useState(false)
    let [name,setName] = useState("")
    let changepages = (page, pageSize) => {
        setPage(page)
        setPageSize(pageSize)
    }
    useEffect(() => {
        Getg(seaCate, brand, area, tem, page, pageSize,{type:sorts,isup:isup},name).then(res => {
            setList(res.data.list)
            setTotal(res.data.total)
        })
    }, [seaCate, brand, area, tem, page, pageSize,sorts,isup])
    let changesor = (type) => {
        setSorts(type)
        if (type =="price") {
            setIsup(!isup)
        }
    }
    let Search=()=>{
        Getg(seaCate, brand, area, tem, page, pageSize,{type:sorts,isup:isup},name).then(res => {
            setList(res.data.list)
            setTotal(res.data.total)
        })
    }
    let nav=useNavigate()
    let goto=(x)=>{
        nav("/detail",{
            state:x
        })
    }
    return (
        <div style={{ width: "1200px", margin: "0 auto" }}>
            <div className={styles.top}>
                <div className={styles.topLeft}>
                    <div style={{ width: "80px", height: "80px", borderRadius: "50%", backgroundColor: "#97cc20", textAlign: "center", lineHeight: "80px", color: "white" }}>
                        Logo
                    </div>
                    <div style={{ fontSize: "30px", marginLeft: "20px", height: "80px", lineHeight: "80px", color: "#97cc3d" }}>
                        生鲜电商
                    </div>
                </div>
                <div className={styles.topRight}>
                    <div className={styles.seabar}>
                        <div>
                            <input type="text" placeholder="请输入搜索内容" style={{ borderColor: "#97cc3d", width: "400px", height: "40px", }} value={name} onInput={(e)=>setName(e.target.value)}/>
                        </div>
                        <div style={{ height: "45px", width: "100px", backgroundColor: "#97cc3d", color: "white", textAlign: "center", lineHeight: "45px" }} onClick={Search}>
                            搜索
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.pin}>
                <span>
                    品类：
                </span>
                <span className={styles.tag} onClick={() => setSeacate("草莓")} style={{ backgroundColor: seaCate === "草莓" ? "#97cc3d" : "" }}>
                    草莓
                </span>
                <span className={styles.tag} onClick={() => { setSeacate("苹果") }} style={{ backgroundColor: seaCate === "苹果" ? "#97cc3d" : "" }}>
                    苹果
                </span>
                <span className={styles.tag} onClick={() => { setSeacate("香蕉") }} style={{ backgroundColor: seaCate === "香蕉" ? "#97cc3d" : "" }}>
                    香蕉
                </span>
                <span className={styles.tag} onClick={() => { setSeacate("葡萄") }} style={{ backgroundColor: seaCate === "葡萄" ? "#97cc3d" : "" }}>
                    葡萄
                </span>
                <span className={styles.tag} onClick={() => { setSeacate("水蜜桃") }} style={{ backgroundColor: seaCate === "水蜜桃" ? "#97cc3d" : "" }}>
                    水蜜桃
                </span>
            </div>
            <div style={{ marginTop: "40px" }}>
                <span>
                    品牌：
                </span>
                <span className={styles.tag} onClick={() => { setBrand("红富士") }} style={{ backgroundColor: brand === "红富士" ? "#97cc3d" : "" }}>红富士</span>
                <span className={styles.tag} onClick={() => { setBrand("静宁") }} style={{ backgroundColor: brand === "静宁" ? "#97cc3d" : "" }}>静宁</span>
                <span className={styles.tag} onClick={() => { setBrand("好乐") }} style={{ backgroundColor: brand === "好乐" ? "#97cc3d" : "" }}>好乐</span>
            </div>
            <div style={{ marginTop: "40px" }}>
                <span>产地：</span>
                <span className={styles.tag} onClick={() => { setArea("山东省") }} style={{ backgroundColor: area === "山东省" ? "#97cc3d" : "" }}>山东省</span>
                <span className={styles.tag} onClick={() => { setArea("河北省") }} style={{ backgroundColor: area === "河北省" ? "#97cc3d" : "" }}>河北省</span>
                <span className={styles.tag} onClick={() => { setArea("甘肃省") }} style={{ backgroundColor: area === "甘肃省" ? "#97cc3d" : "" }}>甘肃省</span>
            </div>
            <div style={{ marginTop: "40px" }}>
                <span>贮存：</span>
                <span className={styles.tag} onClick={() => { setTem("常温") }} style={{ backgroundColor: tem === "常温" ? "#97cc3d" : "" }}>常温</span>
                <span className={styles.tag} onClick={() => { setTem("冷藏") }} style={{ backgroundColor: tem === "冷藏" ? "#97cc3d" : "" }}>冷藏</span>
            </div>
            <div style={{ marginTop: "100px", backgroundColor: "#f4f8ff", width: "100%", overflow: "hidden" }}>
                <div style={{ marginTop: "40px" }}>
                    <span style={{ marginLeft: "20px", fontSize: "20px", color: sorts == "" ? "#9dce56" : "" }} onClick={() => changesor("")}>综合</span>
                    <span style={{ marginLeft: "20px", fontSize: "20px", color: sorts == "price" ? "#9dce56" : "" }} onClick={() => changesor("price")}>价格</span>
                </div>
                <div style={{ marginTop: "20px", display: "flex", flexWrap: "wrap", }}>
                    {
                        list.map((item, index) => <div className={styles.item} style={{ border: itemindex == index ? "1px solid black" : "" }} onMouseEnter={() => setItemindex(index)} onClick={()=>goto(item)}>
                            <div style={{ textAlign: "center" }}>
                                <img src={item.img} style={{ width: "200px" }} />
                            </div>
                            <p style={{ fontSize: "20px" }}>{item.name}</p>
                            <p style={{ color: "#999999" }}>纯天然种植 | 自然生长 | 纯种绿色</p>
                            <p style={{ color: "#fd010b", fontSize: "26px", fontWeight: "bold" }}>
                                ￥ {item.price + ".00"}
                            </p>
                            <div style={{ position: "absolute", bottom: "20px", right: "5px", border: "1px solid #97cc3d", fontSize: "12px", color: "#97d0a7" }}>
                                加入购物车
                            </div>
                        </div>)
                    }
                </div>
            </div>
            <div style={{ width: "1200px", margin: "20px auto", textAlign: "center" }}>
                <Pagination
                    total={total}
                    showSizeChanger
                    showQuickJumper
                    pageSize={pageSize}
                    onChange={(page, pageSize) => changepages(page, pageSize)}
                    pageSizeOptions={[1, 2, 3, 4, 5]}
                />
            </div>
            <div>
                <img src="../public/bottom.png" alt="" style={{width:"1200px"}}/>
            </div>
        </div>
    );
}